<!-- <template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="脚本名称" prop="scriptName">
            <el-input v-model="form.scriptName" placeholder="请输入脚本名称"/>
          </el-form-item>
          <el-form-item label="所属产品" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择所属产品">
              <el-option
                v-for="item in productOptions"
                :key="item.id"
                :label="item.productName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="脚本标识" prop="scriptKey">
            <el-input v-model="form.scriptKey" placeholder="请输入脚本标识"/>
          </el-form-item>
          <el-form-item label="脚本事件" prop="scriptEvent">
            <el-select v-model="form.scriptEvent" placeholder="请选择脚本事件">
              <el-option label="设备上线" value="online"/>
              <el-option label="设备离线" value="offline"/>
              <el-option label="属性上报" value="property"/>
              <el-option label="事件上报" value="event"/>
              <el-option label="定时触发" value="timer"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="脚本动作" prop="scriptAction">
            <el-select v-model="form.scriptAction" placeholder="请选择脚本动作">
              <el-option label="告警" value="alert"/>
              <el-option label="通知" value="notify"/>
              <el-option label="设备控制" value="control"/>
              <el-option label="数据转发" value="forward"/>
            </el-select>
          </el-form-item>
          <el-form-item label="脚本语言" prop="scriptLanguage">
            <el-select v-model="form.scriptLanguage" placeholder="请选择脚本语言">
              <el-option label="JavaScript" value="javascript"/>
              <el-option label="Python" value="python"/>
              <el-option label="Lua" value="lua"/>
            </el-select>
          </el-form-item>
          <el-form-item label="执行顺序" prop="orderNum">
            <el-input-number v-model="form.orderNum" :min="1" :max="999" controls-position="right"/>
          </el-form-item>
          <el-form-item label="状态" prop="isEnabled">
            <el-radio-group v-model="form.isEnabled">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="脚本内容" prop="scriptContent">
            <el-input
              type="textarea"
              v-model="form.scriptContent"
              :rows="15"
              placeholder="请输入脚本内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getScript, addScript, updateScript } from "@/api/iot/script";
import { listProduct } from "@/api/iot/product";

export default {
  name: "ScriptForm",
  data() {
    return {
      // 表单参数
      form: {
        id: undefined,
        scriptName: undefined,
        productId: undefined,
        scriptKey: undefined,
        scriptEvent: undefined,
        scriptAction: undefined,
        scriptLanguage: undefined,
        scriptContent: undefined,
        orderNum: 1,
        status: "0",
        remark: undefined
      },
      // 产品选项
      productOptions: [],
      // 表单校验
      rules: {
        scriptName: [
          { required: true, message: "脚本名称不能为空", trigger: "blur" }
        ],
        productId: [
          { required: true, message: "所属产品不能为空", trigger: "change" }
        ],
        scriptKey: [
          { required: true, message: "脚本标识不能为空", trigger: "blur" }
        ],
        scriptEvent: [
          { required: true, message: "脚本事件不能为空", trigger: "change" }
        ],
        scriptAction: [
          { required: true, message: "脚本动作不能为空", trigger: "change" }
        ],
        scriptLanguage: [
          { required: true, message: "脚本语言不能为空", trigger: "change" }
        ],
        scriptContent: [
          { required: true, message: "脚本内容不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.getInfo(id);
    }
    this.getProductOptions();
  },
  methods: {
    /** 获取规则脚本详细信息 */
    getInfo(id) {
      getScript(id).then(response => {
        this.form = response.data;
      });
    },
    /** 获取产品选项 */
    getProductOptions() {
      listProduct().then(response => {
        this.productOptions = response.rows;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateScript(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.goBack();
            });
          } else {
            addScript(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.goBack();
            });
          }
        }
      });
    },
    /** 返回按钮 */
    goBack() {
      this.$router.push({ path: "/iot/script" });
    }
  }
};
</script>

<style scoped>
.top-right-btn {
  position: relative;
  text-align: right;
}
</style>  -->